<!doctype html>
{php}
    $static = '/static/home/';
{/php}
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
</head>

<body data-sidebar="dark">

<!-- Begin page -->
<div id="layout-wrapper">

    {include file='public/mine_topbar' /}
    {include file='public/mine_left' /}

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <h5 class="font-size-14">累计充值金额</h5>
                                    </div>
                                    <div class="avatar-xs">
                                        <span class="avatar-title rounded-circle bg-primary">
                                            <i class="mdi mdi-cash-usd"></i>
                                        </span>
                                    </div>
                                </div>
                                <h4 class="m-0 align-self-center">¥{$totalAmount}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <h5 class="font-size-14">今日充值金额</h5>
                                    </div>
                                    <div class="avatar-xs">
                                        <span class="avatar-title rounded-circle bg-primary">
                                            <i class="mdi mdi-cash-usd"></i>
                                        </span>
                                    </div>
                                </div>
                                <h4 class="m-0 align-self-center">¥{$todayAmount}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <h5 class="font-size-14">充值成功笔数</h5>
                                    </div>
                                    <div class="avatar-xs">
                                        <span class="avatar-title rounded-circle bg-primary">
                                            <i class="dripicons-briefcase"></i>
                                        </span>
                                    </div>
                                </div>
                                <h4 class="m-0 align-self-center">{$successTimes}</h4>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="media">
                                    <div class="media-body">
                                        <h5 class="font-size-14">充值失败笔数</h5>
                                    </div>
                                    <div class="avatar-xs">
                                        <span class="avatar-title rounded-circle bg-primary">
                                            <i class="dripicons-briefcase"></i>
                                        </span>
                                    </div>
                                </div>
                                <h4 class="m-0 align-self-center">{$failTimes}</h4>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- end row -->

                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title mb-4">充值统计</h4>
                                <div id="revenue-chart" class="apex-charts" dir="ltr"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->


    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->

<!-- Right bar overlay-->
<div class="rightbar-overlay"></div>

<!-- JAVASCRIPT -->
<script src="{$static}libs/jquery/jquery.min.js"></script>
<script src="{$static}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{$static}libs/metismenu/metisMenu.min.js"></script>
<script src="{$static}libs/simplebar/simplebar.min.js"></script>
<script src="{$static}libs/node-waves/waves.min.js"></script>

<!-- apexcharts -->
<script src="{$static}libs/apexcharts/apexcharts.min.js"></script>

<script src="{$static}libs/slick-slider/slick/slick.min.js"></script>

<script type="text/javascript">
    var seriesTotalAmount = JSON.parse('{:$seriesTotalAmount}');
    var xaxisCreateDate = JSON.parse('{:$xaxisCreateDate}');

    var options = {
        chart: {
            height: 450,
            type: "line",
            zoom: {
                enabled: !1
            },
            toolbar: {
                show: !1
            }
        },
        dataLabels: {
            enabled: !1
        },
        stroke: {
            width: 3,
            curve: "smooth",
            dashArray: [0, 8]
        },
        series: [{
            name: "充值金额",
            data: seriesTotalAmount
        }],
        colors: ["#3d8ef8"],
        fill: {
            opacity: [1, .15]
        },
        markers: {
            size: 0,
            hover: {
                sizeOffset: 6
            }
        },
        xaxis: {
            categories: xaxisCreateDate
        },
        grid: {
            borderColor: "#f1f1f1"
        }
    };
    (chart = new ApexCharts(document.querySelector("#revenue-chart"),options)).render();
</script>

<script src="{$static}js/app.js"></script>

</body>
</html>
